<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易量监控大屏</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/monitor.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body class="monitor-body">
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-dark monitor-navbar">
        <div class="container-fluid">
            <div class="navbar-brand">
                <span class="title-icon">📈</span>
                <span>交易量监控系统</span>
            </div>
            <div class="navbar-text">
                <a href="province-compare.html" class="btn btn-outline-light btn-sm me-2">省份环比监控</a>
                <a href="transaction-monitor.html" class="btn btn-outline-light btn-sm me-2">实时交易量监控</a>
                <a href="history-monitor.html" class="btn btn-outline-light btn-sm me-2">历史交易量监控</a>
                <span id="currentTime" class="time-display">--</span>
            </div>
        </div>
    </nav>

    <!-- 主要监控区域 -->
    <div class="container-fluid monitor-container">
        
        <!-- 导航卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">📊</span>
                            省份交易量环比监控
                        </h3>
                    </div>
                    <div class="panel-body text-center">
                        <p class="mb-3">分析各省份交易量的环比变化趋势，支持多省份对比分析</p>
                        <div class="mb-3">
                            <span class="badge bg-primary me-2">56个省份</span>
                            <span class="badge bg-success me-2">最多5个对比</span>
                            <span class="badge bg-info">按日期横坐标</span>
                        </div>
                        <a href="province-compare.html" class="btn btn-primary btn-lg">进入省份环比监控</a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">📈</span>
                            实时交易量监控
                        </h3>
                    </div>
                    <div class="panel-body text-center">
                        <p class="mb-3">实时监控交易量、成功率、失败响应码等关键指标</p>
                        <div class="mb-3">
                            <span class="badge bg-warning me-2">实时刷新</span>
                            <span class="badge bg-danger me-2">失败码监控</span>
                            <span class="badge bg-success">成功率统计</span>
                        </div>
                        <a href="transaction-monitor.html" class="btn btn-success btn-lg">进入实时交易量监控</a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">📊</span>
                            历史交易量监控
                        </h3>
                    </div>
                    <div class="panel-body text-center">
                        <p class="mb-3">历史交易量趋势分析，支持按天/月统计和环比同比对比</p>
                        <div class="mb-3">
                            <span class="badge bg-info me-2">历史趋势</span>
                            <span class="badge bg-warning me-2">环比同比</span>
                            <span class="badge bg-primary">多维度统计</span>
                        </div>
                        <a href="history-monitor.html" class="btn btn-info btn-lg">进入历史交易量监控</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 系统概览 -->
        <div class="row">
            <div class="col-12">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">ℹ️</span>
                            系统说明
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h5>功能特点</h5>
                                <ul>
                                    <li><strong>省份环比监控</strong>：支持56个省份的交易量环比分析，可选择最多5个省份同时对比</li>
                                    <li><strong>实时交易监控</strong>：实时监控交易量、成功率、失败响应码趋势</li>
                                    <li><strong>历史交易监控</strong>：历史交易量趋势分析，支持按小时/天/周/月统计，环比同比对比</li>
                                    <li><strong>灵活查询条件</strong>：支持时间范围、中心、服务平台等多维度筛选</li>
                                    <li><strong>自动刷新</strong>：数据自动刷新，保证监控的实时性</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h5>技术架构</h5>
                                <ul>
                                    <li><strong>前端技术</strong>：HTML5 + Bootstrap 5 + jQuery + ECharts</li>
                                    <li><strong>图表组件</strong>：基于ECharts的交互式图表展示</li>
                                    <li><strong>响应式设计</strong>：支持PC和移动端访问</li>
                                    <li><strong>模块化设计</strong>：每个监控功能独立页面，便于维护</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态指示器 -->
    <div id="statusIndicator" class="status-indicator">
        <div class="status-dot"></div>
        <span class="status-text">连接正常</span>
    </div>

    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" class="loading-overlay hidden">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
        <div class="loading-text">正在加载监控系统...</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/utils.js"></script>
    <!-- 主页只需要基本的时间显示功能 -->
    <script>
        $(document).ready(function() {
            // 初始化时间显示
            function updateTime() {
                $('#currentTime').text(getCurrentTimeString());
            }
            updateTime();
            setInterval(updateTime, 1000);
        });
    </script>
</body>
</html>